<template>
  <el-card class="box-card">
    <el-button type="primary" icon="Plus">添加品牌</el-button>
    <el-table style="margin: 10px 0px" border>
      <el-table-column
        label="序号"
        width="80px"
        align="center"
      ></el-table-column>
      <el-table-column label="品牌名称"></el-table-column>
      <el-table-column label="品牌LOGO"></el-table-column>
      <el-table-column label="品牌操作"></el-table-column>
    </el-table>
    <!-- 
      layout:用于调整prev, pager, next, jumper,sizes,total这几个组件的位置，
      其中 -> 符号可以把其后面的组件顶到最右边
     -->
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[100, 200, 300, 400]"
      :background="true"
      :small="true"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref } from "vue";
let currentPage = ref<number>(1);
let pageSize = ref<number>(10);

const handleSizeChange = () => {};
const handleCurrentChange = () => {};
</script>
<style scoped lang="scss"></style>
